<template>
	<view>
		<view class="navbar" :style="{height: height}">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
			<view class="navbar-header" >
				<!-- <view class="left" @click="$mRouter.back()"> -->
				<view class="left" @click.stop="back">
					<u-icon name="arrow-left" size="36" :color="textColor" ></u-icon>
				</view>
				{{ title }}
			</view>
			<view class="u-flex u-row-between u-m-t-40">
				<view class="u-flex" v-if="image || status" style="height: 80rpx">
					<image :src="image" style="width: 51rpx;height: 41rpx;margin-right: 15rpx;margin-top: 5rpx;" mode=""></image>
					<text style="font-size: 36rpx;" v-if="!orderOffline">{{ status }}</text>
					<text style="font-size: 36rpx;" v-else>待确认</text>
					<image src="/static/payment/weixuanze.png" class="u-m-l-10" v-if="paymentMethod == null&&isPayOrder" mode="" style="width: 48rpx;height: 48rpx;"></image>
					<image src="/static/payment/weixin.png" class="u-m-l-10" v-if="(paymentMethod == 0||paymentMethod == 7)&&isPayOrder" mode="" style="width: 48rpx;height: 48rpx;"></image>
					<image src="/static/payment/zhifubao.png" class="u-m-l-10"  v-if="(paymentMethod == 1||paymentMethod == 11||paymentMethod == 13)&&isPayOrder" mode="" style="width: 48rpx;height: 48rpx;"></image>
					<image src="/static/payment/xianxiazhifu.png" class="u-m-l-10"  v-if="paymentMethod == 3&&isPayOrder" mode="" style="width: 48rpx;height: 48rpx;"></image>
					<image src="/static/payment/xianxiazhifu.png" class="u-m-l-10"  v-if="paymentMethod == 4&&isPayOrder" mode="" style="width: 48rpx;height: 48rpx;"></image>
					<image src="/static/payment/gonghang.png" class="u-m-l-10"  v-if="paymentMethod == 10&&isPayOrder" mode="" style="width: 48rpx;height: 48rpx;"></image>
					<!-- <view class="u-m-l-10">
						
					</view> -->
					
					<!-- <image src="/static/payment/gonghang.png" class="u-m-l-10" mode="" style="width: 48rpx; height: 48rpx;"></image> -->
					<!-- <text v-if="isOffline" style="font-size: 24rpx;margin-left: 20rpx;  background-color: red;box-sizing: border-box;padding: 8rpx 23rpx;border-radius: 26rpx;color: #fff;">线下支付</text> -->
				</view>
				<view v-else>
					<slot name="left"></slot>
				</view>
				<view class="u-flex">
					<view class="yx-bt" v-if="btText != ''" style="margin-right: 20rpx;" @click="btClick">
						{{ btText }}
					</view>
					<slot v-else name="right"></slot>
				</view>
			</view>
		<!-- 	<view v-if="expire">
				<image src="/static/mendian/daojishi.png" style="width: 26rpx;height: 26rpx;vertical-align: middle;" mode=""></image>
				<text class="u-font-24 u-m-l-20" style="vertical-align: middle;">{{ expire }}后自动取消订单</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			status: {
				type: String,
				default: '',
			},
			image: {
				type: String,
				default: ''
			},
			btText: {
				type: String,
				default: ''
			},
			expire: {
				type: String,
				default: ''
			},
			isOffline:{
				type: Boolean,
				default: false
			},
			orderOffline:{
				type: Boolean,
				default: false
			},
			isPayOrder:{
				type: Boolean,
				default: false
			},
			paymentMethod:null
		},
		data(){
			return {
				statusBarHeight: systemInfo.statusBarHeight
			}
		},
		computed: {
			height() {
				// if (this.expire) {
				// 	// #ifdef APP-PLUS 
				// 		return (this.statusBarHeight+280)+'rpx'
				// 	// #endif
				// 	// #ifndef APP-PLUS
				// 		return '270rpx'
				// 	// #endif
				// } else {
					// #ifdef APP-PLUS
						return (this.statusBarHeight+240)+'rpx'
					// #endif
					// #ifndef APP-PLUS
						return '240rpx'
					// #endif
				// }
			}
		},
		onLoad() {
			console.log(this.btText)
		},
		methods: {
			btClick() {
				this.$emit('btClick')
			},
			back() {
				if(this.$listeners['back']){
					// 如果提供执行
				    this.$emit('back');
				 }else{
					 uni.navigateBack()
				 }
				// this.$emit('back')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
		position: fixed;
		width: 100%;
		height: 270rpx;
		background-image: $linear-gradient;
		/* padding: 0 35rpx; */
		padding-left: 35rpx;
		padding-right: 18rpx;
		/* #ifdef H5 */
		padding-top: 38.5rpx;
		/* #endif */
		font-size: 36rpx;
		z-index: 999;
		color: $uni-text-color;
		text {
			color: $uni-text-color;
		}
		.navbar-header {
			text-align: center;
			.left {
				position: absolute;
				// float: left;
				left: 35rpx;
			}
		}
	}
	.yx-bt {
		width: 200rpx;
		height: 80rpx;
		border: 1rpx solid $uni-text-color;
		border-radius: 40px;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
	}
</style>
